<template>
  <div>
    <div style="display: flex;flex-direction: row;justify-content: space-between;">
      <el-form :inline="true" :model="searchForm" ref="formRef">
        <el-form-item label="预定日期" prop="orderDate">
          <el-date-picker v-model="searchForm.orderDate" value-format="YYYY-MM-DD" type="date" placeholder="请选择预定日期"
            :disabled-date="disabledDate" :shortcuts="shortcuts" />
        </el-form-item>
        <el-form-item label="场地" prop="venueId">
          <el-select v-model="searchForm.venueId" placeholder="请选择场地">
            <el-option v-for="item in state.optionArea" :key="item.venueId" :label="item.venueName" :value="item.venueId" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleGet">查询</el-button>
          <el-button @click="onReset(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
      <ExportButton :path="AREA_DATA_EXPORT_PATH" :fileName="AREA_DATA_EXPORT_FILE_NAME" />
    </div>
    <el-row :gutter="20" class="mb15">
      <el-col :span="6">
        <span>
          该时间段订单总数量:
          <span class="color-success font20">{{ toThousands(state.totalInfo.totalOrderCount) }} 笔</span>
        </span>
      </el-col>
      <el-col :span="6">
        <span>
          该时间段内部订单总数量:
          <span class="color-warning font20">{{ toThousands(state.totalInfo.totalInternalOrderCount) }} 笔</span>
        </span>
      </el-col>
      <el-col :span="6">
        <span>
          该时间段踢球人数量:
          <span class="color-danger font20">{{ toThousands(state.totalInfo.totalPeopleCount) }} 人</span>
        </span>
      </el-col>
      <el-col :span="6">
        <span>
          该时间段订单总金额:
          <span class="color-primary font20">{{ toThousands(state.totalInfo.totalTransactionAmount) }} 元</span>
        </span>
      </el-col>
    </el-row>
    <el-table :data="state.tableData" border style="width: 100%">
      <el-table-column prop="index" label="序号" width="60" />
      <el-table-column prop="orderNumber" label="订单编号" width="180" />
      <el-table-column label="订单状态" width="100">
        <template #default="scope">
          {{ OrderStatusEnumText[scope.row.orderStatus as OrderStatusEnum] }}
        </template>
      </el-table-column>
      <el-table-column prop="venueName" label="预定场馆" width="120" />
      <el-table-column prop="siteName" label="预定场地" width="120" />
      <el-table-column label="预定日期" width="120">
        <template #default="scope">
          {{ formatDate(new Date(scope.row.orderDate), "YYYY-mm-dd") }}
        </template>
      </el-table-column>
      <el-table-column label="预定时间" width="120">
        <template #default="scope">
          {{ scope.row.orderStartTime }} - {{ scope.row.orderEndTime }}
        </template>
      </el-table-column>
      <el-table-column prop="transactionAmount" label="金额" />
      <el-table-column prop="orderUserName" label="预订人" />
      <el-table-column prop="phoneNumber" label="联系方式" width="120" />
      <el-table-column prop="peopleCount" label="踢球人数" width="100" />
      <el-table-column prop="remark" label="备注">
        <template #default="scope">
          {{ scope.row.remark === null ? '--' : scope.row.remark }}
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="state.total" :limit="state.pageSize" :page-change="PageChange" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { formatDate } from "@/utils/formatTime";
import { toThousands } from "@/utils/toolsValidate";
import Pagination from "@/components/pagination/index.vue";
import { OrderStatusEnum } from "@/views/area/config/enum";
import { OrderStatusEnumText } from "@/views/area/config/index";
import { postOrderSummaryList, getVenueSiteList, postOrderList } from "@/api/area/index";
import ExportButton from '@/components/ExportButton/index.vue'
import { AREA_DATA_EXPORT_PATH, AREA_DATA_EXPORT_FILE_NAME } from '@/components/ExportButton/config'

const formRef = ref<FormInstance>();
const searchForm = reactive({
  venueId: "",
  orderDate: "",
});
const shortcuts = [
  {
    text: "今天",
    value: new Date(),
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "上周",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
  {
    text: "上个月",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
      return date;
    },
  },
];
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};
const state = reactive({
  total: 10,
  pageNum: 1,
  pageSize: 10,
  tableData: [],
  optionArea: [],
  totalInfo: {
    totalOrderCount: 0,
    totalInternalOrderCount: 0,
    totalPeopleCount: 0,
    totalTransactionAmount: 0
  }
});
// 导出订单
const handleAddOrder = () => {
  // addDialogRef.value.dialogVisible = true;
};
// 查询按钮
const handleGet = () => {
  getOrderInfo();
  getOrderSummaryDate();
}
// 重置按钮
const onReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  handleGet();
};
// 获取订单数据
const getOrderInfo = () => {
  postOrderList({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
    extraParamMap: { ...searchForm, venueId: searchForm.venueId.toString() },
  }).then(res => {
    state.tableData = res.data.rows || []
    state.total = res.data.total || 0
    for (let i = 0; i < state.tableData.length; i++) {
      state.tableData[i].index = (state.pageNum - 1) * state.pageSize + i + 1
    }
  })
};
// 查询订单总量
const getOrderSummaryDate = () => {
  postOrderSummaryList({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
    extraParamMap: { ...searchForm, venueId: searchForm.venueId.toString() },
  }).then((res) => {
    state.totalInfo = { ...res.data };
  });
};
// 查询场地信息
const getAreaDate = () => {
  getVenueSiteList().then((res) => {
    state.optionArea = res.data || [];
  });
};
getAreaDate();
handleGet();
// 分页
const PageChange = (page: number) => {
  state.pageNum = page;
  getOrderInfo();
  getOrderSummaryDate();
};
</script>

<style lang="scss" scoped>
.el-form .el-form-item:last-of-type {
  margin-bottom: 18px !important;
}
</style>
